import {designPage, useRefs} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import data from '../../../data/data-50.json';
import {Adc, AdcIndex, AntdTable, Button, ButtonGroup} from "../../../../packages";
import {delay} from "plain-utils/utils/delay";

export const demo1 = designPage(() => {

  const { refs, onRef } = useRefs({ table: AntdTable });

  return () => (
    <DemoRow title="同步格式化值">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
        <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
      </ButtonGroup>
      <AntdTable dataSource={data} showRows={10} ref={onRef.table}
                 pagination={false}>
        <AdcIndex/>
        <Adc title="名称" dataIndex="name"/>
        <Adc title="电话号码" dataIndex="tel" overflowTooltip/>
        <Adc title="电话号码(tel)" dataIndex="tel" formatter="tel" width={150} overflowTooltip/>
        <Adc title="整数" dataIndex="float"/>
        <Adc title="整数(int)" dataIndex="float" formatter="int"/>
        <Adc title="金额" dataIndex="num" align="right"/>
        <Adc title="金额(money)" dataIndex="num" formatter="money" align="right"/>
        <Adc title="人民币" dataIndex="num" align="right"/>
        <Adc title="人民币(cny)" dataIndex="num" formatter="cny" align="right"/>
        <Adc title="百分比" dataIndex="percent" align="right"/>
        <Adc title="百分比(percent)" dataIndex="percent" formatter="percent" align="right"/>
      </AntdTable>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const { refs, onRef } = useRefs({ table: AntdTable });

  const statusMap: any = {
    primary: '基础',
    success: '成功',
    warn: '警告',
    error: '错误',
    info: '通知',
  };

  const statusAsyncFormatter = async (value: string | null) => {
    await delay(Math.random() * 3000);
    return !value ? null : statusMap[value];
  };

  return () => (
    <DemoRow title="异步格式化值">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
        <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
      </ButtonGroup>
      <AntdTable dataSource={data} showRows={10} ref={onRef.table}>
        <AdcIndex/>
        <Adc title="名称" dataIndex="name"/>
        <Adc title="状态" dataIndex="status"/>
        <Adc title="状态asyncFormatter(tooltip)" dataIndex="status" asyncFormatter={statusAsyncFormatter} overflowTooltip/>
        <Adc title="状态asyncFormatter" dataIndex="status" asyncFormatter={statusAsyncFormatter}/>
      </AntdTable>
    </DemoRow>
  );
});
